/**
 * Created by Administrator on 2017/3/1.
 */

import $ from 'jquery';
import Vue from 'vue';

$(function(){
    init();
});
function init()
{
    Vue.component('todo-items',{
        template : '#todo-items-template',
        props : ['msg'],
        methods:{
            deleteTodo:function (index) {
                this.msg.splice(index,1);
            },
            toggleCompletion:function (obj) {
                obj.completed = !obj.completed;
            }
        }
    });

    Vue.component('todo-form',{
        template:'#todo-add-form-template',
        props : ['msg'],
        data(){
            return {
                newTodo:{id:null,title:'',completed:false}
            }
        },
        methods:{
            addTodo:function (newTodo) {
                this.msg.push(newTodo);
                this.newTodo = {id:null,title:''};
            }
        }
    });

    var app = new Vue({
        el: '#app',
        data: {
            message : 'hello vue',
            msg:[
                {id:1,title:'learn vue',completed:true}
            ]
        },
        computed:{
            toCount(){
                return this.msg.length;
            }
        }
    });
}
